<template>
  <el-container class="sc-main">
    <!--侧边栏-->
    <el-aside width="148px" class="sc-menu">
      <!--菜单组件-->
      <el-menu
        :default-active="this.$route.path"
        @open="handleOpen"
        @close="handleClose"
        router
        class="no-border"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="/log">
          <i class="el-icon-menu"></i>升级日志
        </el-menu-item>
        <el-menu-item index="/file">
          <i class="el-icon-menu"></i>文件管理
        </el-menu-item>
        <el-menu-item index="/log2">
          <i class="el-icon-menu"></i>升级日志
        </el-menu-item>
        <el-menu-item index="/log3">
          <i class="el-icon-menu"></i>升级日志
        </el-menu-item>
        <el-menu-item index="/log4">
          <i class="el-icon-menu"></i>升级日志
        </el-menu-item>
        <el-menu-item index="/log5">
          <i class="el-icon-menu"></i>升级日志
        </el-menu-item>
        <el-submenu index="/log6">
          <template slot="title">
            <i class="el-icon-menu"></i>升级日志
          </template>
          <el-menu-item index="/log7">升级日志</el-menu-item>
          <el-menu-item index="/log8">升级日志</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!--主界面-->
    <el-main class="sc-content">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>
<script>
export default {
  methods: {
    // handleSelect(index){
    //   for(let i=0;i<this.tabsList.length;i++) {
    //     if(this.tabsList[i].name ===index) {
    //       this.tabsIndex=index;
    //       return;
    //     }
    //   }
    //   this.addTab(index);
    // },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style lang="less" scoped>
.sc-main {
  height: 100vh;
}

.sc-menu {
  background-color: #545c64;
}

.sc-content {
  background-color: #eaedf1;
}

.no-border {
  border: 0px;
}

/*主界面动画 淡入淡出*/
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
